<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <title>AUI快速完成布局</title>
        <link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
    </head>
    <body>
        <div class="aui-content" >
            <ul id="loginTab" class="aui-list aui-media-list" onclick="userLogin()">
                <li class="aui-list-item aui-list-item-middle" style="border: none; background-image: url(../../image/my/personal_bkg.jpg); background-size: 100% 100%; ">
                    <div class="aui-media-list-item-inner" style="height: 7rem; ">
                        <div class="aui-list-item-media" style="width: 3rem; margin-right: 1rem">
                            <img src="../../image/my/app_icon.jpg" class="aui-img-round aui-list-img" style="width: 3rem;">
                        </div>
                        <div id="userName" class="aui-list-item-inner aui-list-item-arrow" style="font-size: 1rem; color:#fff">
                            点击登录
                        </div>
                    </div>
                </li>
            </ul>
            <ul class="aui-list aui-list-in">
                <li class="aui-list-header"></li>
                <li class="aui-list-item" name="myInfo" onclick="openMyInfo(this)">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-my aui-text-info"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        我的个人资料
                    </div>
                </li>
                <li class="aui-list-item" name="myFavorite" onclick="openMyFavorite(this)">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-like aui-text-info"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        我的收藏
                    </div>
                </li>
                <li class="aui-list-item" name="myLoan" onclick="openMyLoan(this)">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-cart aui-text-info"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        贷款管理
                    </div>
                </li>
                <li class="aui-list-item" name="myRecentPay" onclick="openMyRecentPay(this)">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-calendar aui-text-info"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        近期需还贷款
                    </div>
                </li>
            </ul>
            <ul style="display: none" class="aui-list aui-list-in">
                <li class="aui-list-header"></li>
                <li class="aui-list-item" name="myProgress" onclick="openMyProgress(this)">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-date aui-text-info"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        申请进度查询
                    </div>
                </li>
                <li class="aui-list-item" name="myPay" onclick="openMyPay(this)">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-cert aui-text-info"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        我要还款
                    </div>
                </li>
            </ul>
            <ul class="aui-list aui-list-in">
                <li class="aui-list-header"></li>
                <li class="aui-list-item" name="myHelp" onclick="openMyHelp(this)">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-phone aui-text-info"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        帮助与客服
                    </div>
                </li>
                <li class="aui-list-item" name="mySetting" onclick="openMySetting(this)">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-gear aui-text-info"></i>
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        设置
                    </div>
                </li>
            </ul>
            <div id="logoutFromServer" style="width: 12rem; display:block; margin: 0 auto; margin-top: 0.5rem; margin-bottom: 0.5rem"class="aui-btn aui-btn-info aui-btn-sm" tapmode onclick="logoutFromServer()">
                退出登录
            </div>
        </div>
    </body>
    <script type="text/javascript" src="../../script/api.js" ></script>
    <script type="text/javascript" src="../../script/aui-tab.js" ></script>
    <script type="text/javascript" src="../../script/aui-toast.js" ></script>
    <script type="text/javascript" src="../../script/aui-dialog.js" ></script>
    <script type="text/javascript">
        var isLogin = false;
        function openWinFrame(winName, options) {
            var delay = 0;
            if (api.systemType != 'ios') {
                delay = 300;
            }
            api.openWin({
                name : winName,
                url : './' + winName + '.html',
                bounces : false,
                delay : delay,
                slidBackEnabled : true,
                vScrollBarEnabled : false,
                animation : {
                    type : "movein", //动画类型（详见动画类型常量）
                    subType : "from_left", //动画子类型（详见动画子类型常量）
                    duration : delay //动画过渡时间，默认300毫秒
                },
                pageParam : options,
            });
        }

        function userLogin() {
            openWinFrame('user_login_win', null);
        }

        function openMyInfo(e) {
            if (isLogin == false) {
                userLogin();
                return;
            }
            var options = {
                index : 1,
            };
            openWinFrame('my_info_win', options);
        }

        function openMyLoan(e) {
            if (isLogin == false) {
                userLogin();
                return;
            }
            var options = {
                index : 1,
            };
            openWinFrame('loan_manage_win', options);
        }

        function openMyFavorite(e) {
            if (isLogin == false) {
                userLogin();
                return;
            }
            var options = {
                index : 1,
            };
            openWinFrame('my_favorites_win', options);
        }

        function openMyRecentPay(e) {
            if (isLogin == false) {
                userLogin();
                return;
            }
            var options = {
                index : 1,
            };
            openWinFrame('my_recentpay_win', options);
        }

        function openMyProgress(e) {
            if (isLogin == false) {
                userLogin();
                return;
            }
        }

        function openMyPay(e) {
            if (isLogin == false) {
                userLogin();
                return;
            }
        }

        function openMyHelp(e) {
            if (isLogin == false) {
                userLogin();
                return;
            }
            openWinFrame('my_help_win', null);
        }

        function openMySetting(e) {
            if (isLogin == false) {
                userLogin();
                return;
            }
            openWinFrame('my_setting_win', null);
        }

        apiready = function() {
            api.setRefreshHeaderInfo({
                visible : true,
                bgColor : '#ccc',
                textColor : '#fff',
                textDown : '下拉刷新...',
                textUp : '松开刷新...',
                showTime : true
            }, function(ret, err) {
                api.refreshHeaderLoadDone();
            });
            api.parseTapmode();
            api.addEventListener({
                name : 'ev_frm4_login'
            }, function(ret, err) {
                var userName = document.getElementById("userName");
                var logoutFromServer = document.getElementById("logoutFromServer");
                var loginTab = document.getElementById("loginTab");
                //alert(JSON.stringify(ret));
                userName.textContent = '用户：' + ret.value.phone;
                userName.classList.remove('aui-list-item-arrow');
                loginTab.onclick = "";
                logoutFromServer.style.display = "block";
                isLogin = true;
            });
            api.addEventListener({
                name : 'ev_frm4_logout'
            }, function(ret, err) {
                var userName = document.getElementById("userName");
                var logoutFromServer = document.getElementById("logoutFromServer");
                var loginTab = document.getElementById("loginTab");
                //alert(JSON.stringify(ret));
                userName.textContent = '点击登录/注册';
                userName.classList.add('aui-list-item-arrow');
                loginTab.onclick = function() {
                    userLogin();
                };
                logoutFromServer.style.display = "none";
                isLogin = false;
            });
            var db = api.require('db');
            db.selectSql({
                name : 'loanMarketDB',
                sql : 'SELECT * FROM UserInfo'
            }, function(ret, err) {
                if (ret.status) {
                    //alert("select tbl: " + JSON.stringify(ret));
                    var userName = document.getElementById("userName");
                    var logoutFromServer = document.getElementById("logoutFromServer");
                    var loginTab = document.getElementById("loginTab");
                    if (ret.data.length) {
                        //alert(JSON.stringify(ret));
                        userName.textContent = '用户：' + ret.data[0].Phone;
                        userName.classList.remove('aui-list-item-arrow');
                        logoutFromServer.style.display = "block";
                        loginTab.onclick = "";
                        isLogin = true;
                    } else {
                        userName.textContent = '点击登录/注册';
                        userName.classList.add('aui-list-item-arrow');
                        logoutFromServer.style.display = "none";
                        loginTab.onclick = function() {
                            userLogin();
                        };
                        isLogin = false;
                    }
                } else {
                    alert(JSON.stringify(ret));
                }
            });
        }
        var toast = new auiToast();
        var dialog = new auiDialog();
        function logoutForum() {
            var jsforum = '';
            jsforum += "var resetUrl = app.forum.attribute(\'baseUrl\') + \'/logout?token=\' + app.session.csrfToken;";
            jsforum += "window.location.assign(resetUrl);";
            api.execScript({
                frameName : 'main_frm_3',
                script : jsforum,
            });
            $api.setStorage('forumUser', '');
        }

        function logoutFromServer() {
            var model = api.require('model');
            model.config({
                appId : 'A6928874653494',
                appKey : '4B6C428C-24C2-F9E7-3175-F983922E8C8F',
                host : 'https://d.apicloud.com'
            });
            toast.loading({
                title : "退出登录中",
                duration : 2000
            }, function(ret) {
                console.log(ret);
                setTimeout(function() {
                    toast.hide();
                }, 30000)
            });
            var user = api.require('user');
            user.logout(function(ret, err) {
                if (ret) {
                    if (ret.error) {
                        toast.hide();
                        //alert(JSON.stringify(ret));
                        var errMsg = "";
                        if (ret.error.status == 401) {
                            errMsg = "用户名密码错误！"
                        } else {
                            errMsg = ret.error.message;
                        }
                        dialog.alert({
                            title : "退出失败，错误原因：",
                            msg : errMsg,
                            buttons : ['确定']
                        });
                    } else {
                        //alert(JSON.stringify(ret));
                        toast.hide();
                        toast.success({
                            title : "退出成功！",
                            duration : 1000
                        });
                        $api.rmStorage('userID');
                        $api.rmStorage('username');
                        $api.rmStorage('password');
                        logoutForum();
                        var db = api.require('db');
                        db.executeSql({
                            name : 'loanMarketDB',
                            sql : 'DELETE FROM UserInfo'
                        }, function(ret, err) {
                            if (ret.status) {
                                //alert("DELETE tbl: " + JSON.stringify(ret));
                                api.sendEvent({
                                    name : 'ev_frm4_logout',
                                });
                            } else {
                                alert("DELETE tbl: " + JSON.stringify(err));
                            }
                        });
                    }
                } else {
                    //alert(JSON.stringify(err));
                    toast.hide();
                    var errMsg = "";
                    if (err.status == 401) {
                        errMsg = "用户名密码错误！"
                    } else {
                        errMsg = err.message;
                    }
                    dialog.alert({
                        title : "退出失败！错误原因：",
                        msg : errMsg,
                        buttons : ['确定']
                    });
                }
            });
        }
    </script>
</html>